<!-- 门户网站首页 -->
<template>
	<div>
		<el-container>
			<el-menu style="height: 80px;" :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
				@select="handleSelect" background-color="#000000" text-color="#fff" active-text-color="#ffd04b">
				<el-menu-item class="nav-font" index="1" @click="openComInfo()">公司信息</el-menu-item>
				<el-menu-item class="nav-font" index="2" @click="openArticle()">美文推荐</el-menu-item>
				<el-menu-item class="nav-font" index="3" @click="openRecruit()">招聘信息</el-menu-item>
				<el-menu-item class="nav-font" index="4" @click="openMyself()">个人中心</el-menu-item>

				<!-- 未登录状态 -->
				<el-row v-if="flag==1" style="top: 20px;left: 700px;">
					<el-button round @click="tologin()">登录</el-button>
					<el-button type="info" round @click="toReg()">注册</el-button>
				</el-row>

				<!-- 已登录状态-->
				<el-row v-if="flag==2" style="top: 20px;left: 700px;">
					<el-button type="text" disabled>欢迎{{name}}进入</el-button>
					<el-button type="text" @click="exit()">退出</el-button>
				</el-row>

			</el-menu>

			<el-main>
				<router-view></router-view>
			</el-main>

			<el-footer>
				<ul>
					16组实训作品&nbsp;&nbsp;|&nbsp;&nbsp;请勿商用&nbsp;&nbsp;|&nbsp;&nbsp;联系方式 : 6666666
				</ul>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	/* 导出组件 */
	export default {
	
		data() {
			return {
				activeIndex: '1',
				flag: 1,
				name: "张三"
			};
		},
		methods: {
			openComInfo() {
				this.$router.push("/comInfo");
			},
			openMyself() {
				var that = this
				var token = window.sessionStorage.getItem("token");
				if(token==null){
					that.$confirm('请登录后进入个人中心?是否跳转!', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
					  this.$router.push("/login")
					}).catch(() => {
					  that.$message({
						type: 'info',
						message: '已取消跳转'
					  });          
					});
				}else{
					this.$router.push("/staffHome")
				}
			},
			openArticle(){
				this.$router.push("/article");
			},
			openRecruit(){
				this.$router.push("/recruitInfo");
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			tologin() {
				var that = this;
				that.$router.push("/login");
			},
			toReg() {
				var that = this;
				that.$router.push("/reg");
			},
			exit() {
				this.$confirm('您确定退出吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					window.sessionStorage.clear();
					this.$message({
						type: 'success',
						message: '成功退出!'
					});
					location.reload()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出'
					});
				});
			}

		},
		created() {
			this.$router.push("/comInfo");
			var type;
			var name;
			type = window.sessionStorage.getItem("type");
			name = window.sessionStorage.getItem("name");
			if (type == 2) { //游客登录
				this.flag = 2;
				this.name = name
			} else {
				this.flag = 1
			}
		}
	}
</script>

<style>
	.el-main {
		background-color: #F9F9F9;
		color: #333;
		text-align: center;
		height: 600px;
	}

	.nav-font:nth-child(1) {}

	.nav-font {
		font-size: 20px;
		text-align: center;
		font-family: "楷体";
		top: 10px;
		left: 200px;
	}

	.el-footer {
		background-color: #E4E4E4;
		color: #333;
		text-align: center;
	}

	.text {
		font-size: 14px;
	}

	.item {
		padding: 10px 0;
	}

	.box-card {
		width: 90%;
		height: 95%;
		padding: 10px 60px;
	}
</style>
